
<template>
  <div
    class="flights"
    v-if="flight"
  >
    <!-- 1.0 主要内容 开始 -->
    <div class="flights_main">

      <!-- 0.0 机票筛选组件 开始 -->
      <FlightFilter
        @filterValueChange="filterValueChange"
        :info="flight.info"
        :options="flight.options"
      />
      <!-- 0.0 机票筛选组件 结束 -->

      <!-- 1.1 列表内容 开始 -->
      <FlighsList :flights="pageList" />
      <!-- 1.1 列表内容 结束 -->

      <!-- 2.0 分页组件 开始 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 2.0 分页组件 结束 -->

    </div>
    <!-- 1.0 主要内容 结束 -->
    <!-- 2.0 侧边栏 开始 -->
    <div class="flights_aside">
      <div class="contact">
        <div class="contact_row1">
          <div class="contact_item">
            <i class="iconfont iconweibiaoti-_huabanfuben"></i>
            <p>航协认证</p>
          </div>
          <div class="contact_item">
            <i class="iconfont iconbaozheng"></i>
            <p>出行保证</p>
          </div>
          <div class="contact_item">
            <i class="iconfont icondianhua"></i>
            <p>7X24</p>
          </div>
        </div>
        <div class="contact_row2">
          免费客服电话：4006345678转2
        </div>
      </div>
      <div class="flights_history">
        <div class="flights_history_title">历史查询</div>
        <div class="flights_history_content">
          <div
            class="flights_history_content_item"
            v-for="(item , index) in $store.state.air.history"
            :key="index"
          >
            <div class="flights_history_content_item_info">
              <div>{{item.departCity}} - {{item.destCity}} </div>
              <div>{{item.departDate}}</div>
            </div>
            <div
              @click="goPage(item)"
              class="flights_history_content_item_btn"
            >
              选择
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 2.0 侧边栏 结束 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 接口返回值 对象
      /* 
      flight={
        flights:[机票列表], 总数据   29条 
        info:{航班信息 起飞地方 到达}
        options:{筛选条件数据},
        total:29
      }
       */
      flight: null,
      // 分页后的机票列表  等于 页面上 看到数据
      // 页面上显示的数据 其实是由 pageList 来决定的!!
      pageList: [],
      currentPage: 1,
      // 页容量
      pageSize: 10,
      // 提供给用户选择的页容量的列表  和我们的分页没有直接的关系!
      pageSizes: [5, 10, 20, 50],

      // 筛选组件 筛选的值
      filterValueList: ["", "", "", ""],
      // 筛选后的总条数
      total: 0,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    // 新打开页面或者 url发生改变的时候要做的事情
    async init() {
      const res = await this.$axios.get("/airs", { params: this.$route.query });
      this.flight = res.data;
      this.currentPage = 1;
      // 开启分页处理
      this.countList();
    },

    // 页容量改变事件
    handleSizeChange(val) {
      console.log(val);
      this.pageSize = val;
      // 开启分页处理
      this.countList();
    },
    // 当前 页码改变事件
    handleCurrentChange(val) {
      this.currentPage = val;
      // 开启分页处理
      this.countList();
    },

    // 根据总的数据来计算 分页的数据
    // 先实现筛选 再实现分页
    countList() {
      /* 
      1 总的数据 this.flight.flights  29条数据
      2 分页后的数组  this.pageList 
      3 手上有数据的 1 总数据  总条数  页容量 页码 
      4 开始的条数 (当前的页码 - 1 )  *  页容量
        结束的条数 当前的页码 * 页容量
       */
      // 页码  this.currentPage
      // 页容量  this.pageSize

      // 筛选过后的数组
      const list = this.flight.flights.filter((v) => {
        /* ===== */
        // 1 起飞机场的筛选条件
        // v.org_airport_name="白云机场"  "虹桥机场"
        // 用户选择的筛选组件的值  this.filterValueList[0]
        // 当用户什么都不选 其实是什么都选!!!
        const airpostValid =
          this.filterValueList[0] === "" ||
          this.filterValueList[0] === v.org_airport_name;

        // 2 起飞时间做筛选
        //  this.filterValueList[2] = "6|"12"
        //      08:00       08:10

        // 计算 总分钟数 即可

        let durationValid = this.filterValueList[1] === "";

        if (this.filterValueList[1]) {
          // 计算 它时间区间  durationValid
          const startMinutes = this.filterValueList[1].split("|")[0] * 60;
          const endMinutes = this.filterValueList[1].split("|")[1] * 60;
          const minutes =
            v.dep_time.split(":")[0] * 60 + +v.dep_time.split(":")[1];
          if (minutes >= startMinutes && minutes <= endMinutes) {
            // 满足条件了
            durationValid = true;
          } else {
            durationValid = false;
          }
        }

        // 3 航空公司的筛选条件
        const companyValid =
          this.filterValueList[2] === "" ||
          this.filterValueList[2] === v.airline_name;

        // 4 机型大小筛选
        // this.filterValueList[3] ==="" 用户什么都没有选
        // 表单的值的时候 不熟练的话 都应该放慢一下 脚步 思考 一个值含义
        // 打开外网去参照 去学别人 !! 很重要!!!
        const planValid =
          this.filterValueList[3] === "" ||
          this.filterValueList[3] === v.plane_size;

        return airpostValid && durationValid && companyValid && planValid;
        /* ===== */
      });
      // console.log(list);
      // 筛选后的数据总条数赋值
      this.total = list.length;

      // 再分页
      this.pageList = list.filter((v, index) => {
        // 计算开始的条数
        const start = (this.currentPage - 1) * this.pageSize;
        // 计算结束的条数
        const end = this.currentPage * this.pageSize;
        if (index >= start && index < end) {
          return true;
        } else {
          return false;
        }
      });
    },
    // 筛选组件 值发生改变后触发的事件
    // list = ["","","",""]
    filterValueChange(list) {
      this.filterValueList = list;
      this.countList();
    },
    // 点击 右侧的历史信息
    goPage(item) {
      // console.log(item);

      this.$router.push({ path: "/air/flights", query: item });
    },
  },
  watch: {
    "$route.fullPath": function () {
      this.init();
    },
  },
};
</script>

<style lang="less" scoped  >
.flights {
  display: flex;
  justify-content: space-between;
  width: 1000px;
  margin: 0 auto;
  .flights_main {
    width: 740px;
  }
  .flights_aside {
    width: 240px;
  }
}
.contact {
  margin-top: 20px;
  border: 1px solid #ccc;
  .contact_row1 {
    height: 80px;
    display: flex;
    .contact_item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      i {
        font-size: 40px;
        color: #409eff;
      }
      i:nth-child(2) {
        color: green;
      }

      p {
        font-size: 12px;
      }
    }
  }

  .contact_row2 {
    font-size: 12px;
    height: 30px;
    display: flex;
    align-items: center;
    font-size: 12px;
    padding-left: 10px;
    background-color: #f6f6f6;
  }
}
.flights_history {
  margin-top: 10px;
  border: 1px solid #ccc;
  padding: 0 10px;
  .flights_history_title {
    height: 40px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
  }

  .flights_history_content {
    .flights_history_content_item {
      display: flex;
      justify-content: space-between;
      height: 60px;
      align-items: center;
      .flights_history_content_item_info {
        font-size: 14px;
        div:nth-child(2) {
          font-size: 12px;
          color: #666;
          padding-top: 5px;
        }
      }

      .flights_history_content_item_btn {
        background-color: #ffa500;
        color: #fff;
        width: 40px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        font-size: 12px;
      }
    }
  }
}
</style>